<template>
  <div class="header">
    <div class="suammry">
        <span>全部任务( {{$store.state.list.length}} )</span>
        <span>已完成( {{$store.state.list.length-$store.getters.unFinishCount}} )</span>
        <span>未完成( {{$store.getters.unFinishCount}} )</span>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang='scss' scoped>
    .suammry {
        margin: 10px 0;
        height: 34px; 
        line-height: 25px;
    }
    .suammry span{
        height: 26px;
        margin-right: 14px;
        padding: 2px 13px;
        display: inline-block;
        border-radius: 5px;
        background-color: lightseagreen;
        color: white;
        font-size: 14px;
    }
</style>